<template>
  <div id="Count">
    <h1 ref="countHead">这个组件是用来进行累加计算的</h1>
    <h1>{{count}}</h1>
    <button @click="count++">累加</button >
    <button @click="getRef">通过ref获取元素</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data(){
    return{
      count:0
    }
  },
  methods:{
    getRef(){
      console.log('ref',this.$refs.countHead)
      console.log('ref',this.$refs)
    }
  }
}
</script>

<style scoped>

#Count{
  height: 300px;
  background-color: yellowgreen;
  font-size: 20px;
}
</style>